<template>
   <div class="container">
      <div class="main">
         <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">工作台</el-breadcrumb-item>
         </el-breadcrumb>
         <h1 style="display: flex;font-size: 40px;padding: 10px;">你好,{{ user.username }}</h1>
         <p>你的角色:{{ user.type }}</p>
      </div>
      <div class="footer">
         <div class="top">
            <div class="main1">面板导航</div>
            <div class="each" style="width: 85vw; height: 300px;"></div>
         </div>
         <div class="main2">
            <div class="top1">快速导航</div>
            <div class="bootm">
               <a href="/Articlemanagement">文章管理</a>
               <a href="/Commentmanagement">评论管理</a>
               <a href="Filemanagement">文件管理</a>
               <a href="/Usermanagement">用户管理</a>
               <a href="/Accessstatistics">访问管理</a>
               <a href="/SystemAdministration">系统设置</a>
            </div>
         </div>
         <div class="fo" style="display: flex;flex-wrap: wrap;">
            <div
               style="width: 100%;height: 30px;line-height: 60px;display: flex;justify-content: space-between;"
            >
               <p>最新文章</p>
               <a href="/Articlemanagement">
                  <p>全部文章</p>
               </a>
            </div>
          
               <a-card  style="width: 472px;height: 200px;border: 1px solid #ccc;padding: 0;margin: 0;"
               v-for="v in list"
               key="v.id"
               @click="$router.push('/detail/' + v.id)">
                  <a-card-grid style="width: 100%;height:250px; text-align: center"> <img :src="v.img" style="width:445px;height:150px" /> <p>文章封面</p>
               <p>{{ v.username }}</p></a-card-grid>
               </a-card>
              
            
         </div>
      </div>
      <div class="footer1">
         <div class="footer1top">
            <p>最新品论</p>
            <a href="/Commentmanagement">
               <p>全部品论</p>
            </a>
         </div>
         <div class="footerbom" v-for="v in data1" key="v.id">
            <div class="left">
               {{ v.username }}在
               <span style="color: #4299e1;">文章</span>评论内容
               <span style="color: #4299e1;"></span>
               <el-popover
                  placement="top-start"
                  title="评论详细—原始内容"
                  :width="200"
                  trigger="hover"
                  :content="v.title"
               >
                  <template #reference>
                     <el-button>查看内容</el-button>
                  </template>
               </el-popover>
               {{ v.tyoe }}
            </div>
            <div class="right">
               <span style="color: #4299e1;padding-left: 5px;" @click="tong(v.id)">通过</span>
               <span style="color: #4299e1;padding-left: 5px;" @click="tong1(v.id)">拒绝</span>
               <span style="color: #4299e1;padding-left: 5px;" @click="hui()">回复</span>
               <span style="color: #4299e1;padding-left: 5px;">
                  <el-popconfirm
                     title="确认删除吗？"
                     confirmButtonText="确认"
                     cancelButtonText="取消"
                     @confirm="del(v.id)"
                  >
                     <template #reference>
                        <el-button>删除</el-button>
                     </template>
                  </el-popconfirm>
               </span>
            </div>
        

         </div>
         <el-pagination
          layout="prev, pager, next"
          :page-size="1"
          :total="length"
          @current-change="changeCode"
        ></el-pagination>
      </div>
      <el-dialog v-model="dialogVisible" title="回复评论" width="30%">
         <el-input v-model="textarea" :rows="2" type="textarea" placeholder="Please input" />
         <template #footer>
            <span class="dialog-footer">
               <el-button @click="dialogVisible = false">取消</el-button>
               <el-button type="primary" @click="ls()">回复</el-button>
            </span>
         </template>
      </el-dialog>
   </div>
</template>
  
  <script lang="ts">
import { getUser, getZui, getpin, gettong, gettong1, lis1, pan, dele } from '../../api'
import User from '../../components/User.vue'
import { defineComponent, onMounted, ref, reactive } from 'vue'
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus'

interface IState {
   username: string
   title: string
}
export default defineComponent({
   components: {
      User
   },
   setup() {

      const length = ref('')
      const list = ref()
      const data1 = ref()
      const dialogVisible = ref(false)
      const textarea = ref('')
      const user = ref({ username: '', type: '' })
      onMounted(() => {
         // 获取最新文章
         getZui().then(res => {
            console.log(res, '99');
            list.value = res.data.data
         })
         const token = localStorage.getItem('token')
         // 获取评论
         getpin().then(res => {
            console.log(res);
            data1.value = res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
            length.value=res.data.total
         })



         var myChart = echarts.init(document.querySelector('.each') as HTMLElement);
         myChart.setOption({
            title: {
               text: '每周用户访问指标'
            },
            tooltip: {
               trigger: 'axis',
               axisPointer: {
                  type: 'cross',
                  crossStyle: {
                     color: '#999'
                  }
               }
            },
            toolbox: {
               feature: {
                  dataView: { show: true, readOnly: false },
                  magicType: { show: true, type: ['line', 'bar'] },
                  restore: { show: true },
                  saveAsImage: { show: true }
               }
            },
            legend: {
               data: ['Evaporation', 'Temperature']
            },
            xAxis: [
               {
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                  axisPointer: {
                     type: 'shadow'
                  }
               }
            ],
            yAxis: [
               {
                  type: 'value',
                  name: 'Precipitation',
                  min: 0,
                  max: 400,
                  interval: 100,

               }
            ],
            series: [
               {
                  name: 'Evaporation',
                  type: 'bar',
                  tooltip: {
                     valueFormatter: function (value: number) {
                        return value + ' ml';
                     }
                  },
                  data: [
                     100, 200, 150, 80, 70, 120, 135
                  ]
               },
               {
                  name: 'Temperature',
                  type: 'line',


                  data: [100, 200, 150, 80, 70, 120, 135]
               }
            ]
         })

         //   获取用户信息
         getUser({ token }).then(res => {
            console.log(res, '11');
            user.value = res.data.data
         })
      })

      const token = localStorage.getItem('token')
      // 评论通过
      const tong = (id: any) => {
         console.log(id);

         gettong({ id, token }).then(res => {
            console.log(res);
            if (res.data.code === 200) {
               ElMessage({
                  message: '评论已通过',
                  type: 'success',
               })
               getpin().then(res => {
                  console.log(res);
                  data1.value = res.data.data
               })
            } else if (res.data.code === 503) {
               ElMessage({
                  message: '访客无权操作',
                  type: 'success',
               })
            } else {
               ElMessage({
                  message: '评论已通过',
                  type: 'success',
               })
            }
         })
      }
      // 分页
      const page = reactive({
      pageCode: 1,
      pageSize: 1
    })
      const changeCode = (pageCode: number) => {
      console.log(pageCode);

      page.pageCode = pageCode
      console.log(page);
      const token = localStorage.getItem('token')
  
      getpin().then(res => {
            console.log(res);
            data1.value = res.data.data.slice((page.pageCode - 1) * page.pageSize, page.pageCode * page.pageSize)
            length.value=res.data.total
         })
}
      // 评论拒绝
      const tong1 = (id: any) => {
         console.log(id);
         const token = localStorage.getItem('token')
         gettong1({ id, token }).then(res => {
            console.log(res);
            if (res.data.code === 200) {
               ElMessage({
                  message: '评论已拒绝',
                  type: 'success',
               })
               getpin().then(res => {
                  console.log(res);
                  data1.value = res.data.data
               })
            } else if (res.data.code === 503) {
               ElMessage({
                  message: '访客无权操作',
                  type: 'success',
               })
            } else {
               ElMessage({
                  message: '评论已拒绝',
                  type: 'success',
               })
            }

         })
      }

      // 回回复事件
      const hui = () => {

         pan({ token }).then(res => {
            if (res.data.code === 200) {
               dialogVisible.value = true

            } else {
               ElMessage({
                  message: '访客无权操作',
                  type: 'success',
               })
            }
         })
      }
      const ls = () => {
         console.log(textarea);

         lis1({ token, textarea }).then(res => {
            console.log(res);
            textarea.value = ''
            if (res.data.code === 200) {
               ElMessage({
                  message: '评论成功',
                  type: 'success',
               })
               dialogVisible.value = false
               getpin().then(res => {
                  console.log(res);
                  data1.value = res.data.data
               })
            } else
               ElMessage({
                  message: '错误',
                  type: 'success',
               })


         })
      }
      // 删除评论
      const del = (id: any) => {
         dele({ id, token }).then(res => {
            console.log(res);
            if (res.data.code === 200) {
               ElMessage({
                  message: '删除成功.',
                  type: 'success',
               })
               getpin().then(res => {
                  console.log(res);
                  data1.value = res.data.data
               })
            } else {
               ElMessage({
                  message: '访客不能进行操作.',
                  type: 'success',
               })
            }
         })
      }
      return {
         user,
         list,
         data1,
         tong,
         tong1,
         dialogVisible,
         hui,
         textarea,
         ls,
         del,
         length,
         changeCode
      }
   }
})

</script>
  
  <style scoped lang="scss">
.container {
   height: auto;
   background: #eee;
}
.footerbom {
   width: 98%;
   height: 40px;
   border-bottom: 1px solid #ccc;
   line-height: 40px;
   padding: 0 10px;
   display: flex;
   justify-content: space-between;
   padding: 0 10px;
   line-height: 40px;
}
.footer1top {
   width: 98%;
   height: 40px;
   border-bottom: 1px solid #ccc;
   display: flex;
   justify-content: space-between;
   padding: 0 10px;
   line-height: 40px;
}
.footer1 {
   height: 300px;
   width: 97%;
   background: #fff;
   margin-left: 20px;
}
.top1 {
   width: 100%;
   height: 40px;
   border-bottom: 1px solid #ccc;
}
.main {
   width: 98%;
   height: 130px;
   background: #fff;
   padding-left: 30px;
   padding-top: 10px;
}
.main1 {
   width: 84%;
   height: 50px;
   border-bottom: 1px solid #ccc;
   padding-left: 20px;
   line-height: 50px;
}
.main2 {
   width: 97%;
   height: 200px;
   background: #fff;
   margin-left: 20px;
}
.top1 {
   width: 97%;
   height: 50px;
   line-height: 50px;
   padding-left: 20px;
   border-bottom: 1px solid #eee;
}
.top {
   width: 97%;
   height: 340px;
   background: #fff;
   margin: 20px;
}
.bootm {
   display: flex;
}

.bootm a {
   text-decoration: none;
   color: #000;
   padding-left: 85px;
   padding-right: 85px;
   display: block;
   padding-top: 50px;
}
.fo {
   width: 97%;
   height: 700px;
   background: #fff;
   margin: 20px;
   overflow: hidden;
}
</style>
  